import { Card, NavBar, Toast, Image } from "antd-mobile";
// @ts-ignore
import { useNavigate } from "umi";
import React, { useEffect, useState } from "react";
import axios from "axios";
import "../cateContent/assets/style.scss";

function index() {
  const navigate = useNavigate();
  /* 返回首页 */
  const back = () => {
    navigate("/home");
  };
  const [list, setList] = useState<Array<any>>([]);
  /* 获取收藏列表 */
  const collectList = async () => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/collect/myCollectList",
    });
    console.log(res);
    setList(res.data.data);
  };
  useEffect(() => {
    collectList();
  }, []);

  const demoSrc =
    "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60";
  return (
    <div>
      <div className="contentBox">
        <NavBar back="返回" onBack={back}>
          收藏列表
        </NavBar>
        {/* 让列表下来没有实际作用 */}
        <div style={{ width: "100%", height: 40 }}></div>
        {list?.map((cateContent) => (
          <div key={cateContent?.id} className="cateList">
            <Card key={cateContent?.id}>
              <div className="cardLeft">
                <Image
                  style={{ width: 150 }}
                  src={cateContent?.product.image}
                />
              </div>
              <div className="cardRight">
                <div className="price">
                  <span>
                    {cateContent?.product.name
                      ? cateContent?.product.name
                      : "暂无详情"}
                  </span>
                  <span
                    style={{ color: "red" }}
                  >{`￥${cateContent?.product.price}`}</span>
                </div>
              </div>
            </Card>
          </div>
        ))}
      </div>
    </div>
  );
}

export default index;
